<template>
<!-- 公共的头部 -->
  <div class="common-head">
    <!-- 头部nav-bar 点击左边返回，返回上一个页面 -->
    <!-- title父组件传入，可以前进和后退，left-arrow表示后退图标，title使用父向子传参props传入 -->
    <van-nav-bar
      :title="title"
      left-arrow
      right-text="▶"
      @click-right="$router.go(1)"
      @click-left="$router.go(-1)"
    />
  </div>
</template>

<script>
export default {
  // 父向子通信props
  props: {
    // 传入标题
    title: {
      // 传入类型string字符串
      type: String,
      // 必须传入
      required: true
    }
  }
}
</script>

<style lang="scss" scoped>
// 头
.common-head {
  height: 50px;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  .van-nav-bar {
    background-color: pink;
    // 头部标题
    /deep/ .van-nav-bar__title {
      color: red;
    }
    // 头部返回的图标
    /deep/ .van-icon {
      font-size: 20px;
      color: red;
    }
  }
}
</style>
